<template>
  <div class="admin page-container">
    <div class="admin-title">
      {{ $t("adminCourse.title") }}
      <!-- 我的课程 -->
    </div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-change="handleClick">
      <el-tab-pane :label="item.text" :name="item.id" v-for="item in activeMenuList">
        <template v-if="courseList && courseList.length > 0">
          <div class="el-tab-pane-content" v-for="item in courseList">
            <el-row :gutter="20">
              <el-col :span="14">
                <div class="el-tab-pane-content-left">
                  <div class="el-tab-pane-content-left-img">
                    <img referrerpolicy="no-referrer" :src="item.promotionalImages?.[0]" alt="" />
                  </div>
                  <div class="el-tab-pane-content-left-tab">
                    <div class="el-tab-pane-content-left-tab-name">
                      <div class="name">{{ item.courseName }}</div>
                      <div class="tags">
                        <span>{{ computeCourseTypeLabel(item.courseType) }}</span>
                        <span>{{ computeScheduleTypeLabel(item.scheduleType) }}</span>
                      </div>
                    </div>
                    <div class="el-tab-pane-content-left-tab-detail">
                      <div class="courser-detail">
                        <span>
                          <!-- 适用年龄： -->
                          {{ $t("adminCourse.applicableAge") }}：
                        </span>
                        <span>{{ $t("courseDetail.ageUnit", { age: item.applicableAge || 0 }) }}</span>
                      </div>
                      <div class="courser-detail">
                        <span>
                          {{ $t("adminCourse.hours") }}：
                          <!-- 已购课时： -->
                        </span>
                        <span>
                          {{
                            t("adminCourse.lessonUnit", {
                              count: item.courseStudentClassRecordRespVOS?.length || 0,
                            })
                          }}
                        </span>
                      </div>
                      <div class="courser-detail">
                        <span>
                          {{ $t("adminCourse.validTime") }}：
                          <!-- 有效时间： -->
                        </span>
                        <span>{{ formatDateArea(item.courseStartDate, item.courseEndDate) }}</span>
                      </div>
                      <div class="courser-detail">
                        <span>
                          {{ $t("adminCourse.classroomStudents") }}：
                          <!-- 上课学员： -->
                        </span>
                        <span>{{ item.studentName }}</span>
                      </div>
                      <!-- <div class="courser-detail">
                      <span>授课地点：</span>
                      <span>15-18岁</span>
                    </div> -->
                    </div>
                  </div>
                </div>
              </el-col>
              <el-col :span="10">
                <div class="el-tab-pane-content-right">
                  <div class="el-tab-pane-content-right-flex" @click="goDetail('classSchedule', item)">
                    <div class="left">
                      <svg-icon name="courseSchedule" class="svg-style"></svg-icon>
                      <span>
                        {{ $t("adminCourse.courseTable") }}
                        <!-- 课程表 -->
                      </span>
                    </div>
                    <div class="right">
                      <span> </span>
                      <svg-icon name="arrow-right" class="svg-style"></svg-icon>
                    </div>
                  </div>
                  <div class="el-tab-pane-content-right-flex" @click="showRecord(item)">
                    <div class="left">
                      <svg-icon name="courseRecord" class="svg-style"></svg-icon>
                      <span>
                        {{ $t("adminCourse.courseRecord") }}
                        <!-- 课程记录 -->
                      </span>
                    </div>
                    <div class="right">
                      <span>
                        {{
                          t("adminCourse.courseProgressShort", {
                            completed: item.completedClassHours || 0,
                            total: item.totalClassHours || 0,
                          })
                        }}
                      </span>
                      <svg-icon name="arrow-right" class="svg-style"></svg-icon>
                    </div>
                  </div>
                  <!-- <div
                    class="el-tab-pane-content-right-flex"
                    @click="handleCourseEvaluation"
                  >
                    <div class="left">
                      <svg-icon
                        name="courseEvaluation"
                        class="svg-style"
                      ></svg-icon>
                      <span>
                        {{ $t("adminCourse.courseEvaluation") }}
                      </span>
                    </div>
                    <div class="right">
                      <span> 课程暂未学完,暂不能评价 </span>
                      <svg-icon name="arrow-right" class="svg-style"></svg-icon>
                    </div>
                  </div> -->
                  <div class="el-tab-pane-content-right-flex" @click="handleShowTeacherDialog(item)">
                    <div class="left">
                      <svg-icon name="contactTeacher" class="svg-style"></svg-icon>
                      <span>
                        {{ $t("adminCourse.contactTeacher") }}
                        <!-- 联系教师 -->
                      </span>
                    </div>
                    <div class="right">
                      <div v-for="(teacher, index) in item.courseTeacherConsultantRespVOS" :key="teacher.id"
                        :style="index != 0 ? { marginLeft: '8px' } : null">
                        <!-- <img :src="" :alt="teacher.staffName" /> -->
                        <span>{{ teacher.staffName }}</span>
                      </div>
                      <svg-icon name="arrow-right" class="svg-style"></svg-icon>
                    </div>
                  </div>
                  <!-- <div class="el-tab-pane-content-right-flex" @click="renewal">
                  <div class="left">
                    <svg-icon
                      name="courseReminder"
                      class="svg-style"
                    ></svg-icon>
                    <span>课程提醒</span>
                    <span class="description"> 還有4課時即將結束 </span>
                  </div>
                  <div class="right">
                    <span> 续费 </span>
                    <svg-icon name="arrow-right" class="svg-style"></svg-icon>
                  </div>
                </div> -->
                </div>
              </el-col>
            </el-row>
          </div>
          <div class="pagination">
            <Pagination :background="true" :total="total" :current-page.sync="pageNum" :page-size.sync="pageSize"
              @pagination-change="paginationChange" class="pagination" />
          </div>
        </template>
        <template v-else>
          <el-empty></el-empty>
        </template>
      </el-tab-pane>
    </el-tabs>
  </div>
  <!-- 上课记录 -->
  <el-dialog v-model="classRecord" :title="t('adminCourse.recordDialogTitle')" width="600">
    <div class="classRecord">
      <div class="classRecord-header">
        {{
          t("adminCourse.recordProgress", {
            completed: classRecord?.completedClassHours || 0,
            total: classRecord?.totalClassHours || 0,
          })
        }}
      </div>
      <div class="classRecord-content">
        <div class="classRecord-content-list" v-for="(item, index) in classRecord.list" :key="item.id">
          <div class="left">
            <div class="title">{{ index + 1 }}</div>
            <div class="calendar">{{ item.classDate }}</div>
            <div class="week">{{ convertWeek(item.classDate) }}</div>
            <div class="date">{{ item.startTime }}</div>
          </div>
          <div class="right">{{ convertRecordStatus(item.status) }}</div>
        </div>
      </div>
    </div>
  </el-dialog>
  <evaluation :dialogVisible="dialogVisible" @handleSubmit="handleSubmit" ref="evaluationRef"
    @handleCancelDialogVisible="handleCancelDialogVisible" />
  <el-dialog v-model="coursePackageRef" :title="t('adminCourse.renewal')" width="800">
    <div class="section" style="padding-top: 0">
      <div class="coursePackages">
        <div class="package-select-title">{{ t("adminCourse.selectPackage") }}</div>
        <div class="package-cards">
          <div v-for="pkg in packages" :key="pkg.id" class="package-card"
            :class="{ selected: selectedPackage == pkg.id }" @click="selectedPackage = pkg.id">
            <div class="selected-icon" v-if="selectedPackage == pkg.id">
              <svg-icon name="tick" class="svg-style"></svg-icon>
            </div>
            <div class="package-header">
              <span class="package-header-name">{{ pkg.name }}</span>
              <div class="discount">
                <img src="~/assets/web/package-icon.png" alt="" />
                <span class="percentage">{{ pkg.discount }}</span>
              </div>
            </div>
            <ul class="package-details">
              <li v-for="feature in pkg.features" :key="feature">
                <span class="check-icon" :class="{
                  'check-icon-active': selectedPackage == pkg.id,
                }">
                  <svg-icon name="thickWire" class="svg-style"></svg-icon>
                </span>
                <span class="package-details-val">
                  {{ feature }}
                </span>
              </li>
            </ul>
            <div class="package-price-details">
              <div class="price-item">
                <span>{{ t("adminCourse.packageCoursePrice") }}：</span>
                <span>{{ pkg.coursePrice }}</span>
              </div>
              <div class="price-item">
                <span>{{ t("adminCourse.packageRenewalPrice") }}：</span>
                <span class="renewal-price">{{ pkg.price }}</span>
                <span class="renewal-discount">(-{{ pkg.discount }})</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-title-payType">
        <div class="title">{{ t("adminCourse.paymentMethod") }}</div>
        <el-radio-group v-model="payType">
          <el-radio label="offline" class="section-type-text">
            {{ t("coursePay.methodOffline") }}
          </el-radio>
          <el-radio label="online" class="section-type-text">
            {{ t("coursePay.methodOnline") }}
          </el-radio>
        </el-radio-group>
        <div v-if="payType === 'online'" class="pay-channels">
          <div v-for="channel in payChannelList" :key="channel.value" class="custom-checkbox"
            :class="{ checked: payChannels.includes(channel.value) }" @click="toggleChannel(channel.value)">
            <span class="icon">
              <svg-icon v-if="payChannels.includes(channel.value)" name="is-select" class="svg-style"></svg-icon>
              <svg-icon v-else name="select" class="svg-style"></svg-icon>
            </span>
            <span class="label">{{ channel.label }}</span>
          </div>
        </div>
        <div v-if="payType === 'offline'" class="offline-payment-details">
          <div class="upload-label">{{ t("adminCourse.paymentUploadTip") }}</div>
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <el-icon>
              <Plus />
            </el-icon>
          </el-upload>
        </div>
      </div>
    </div>
    <!-- 立即付款按钮 -->
    <div class="payNow">
      <button v-if="payType === 'online'" class="pay-btn" style="margin-top: 10px">
        {{ t("adminCourse.payNow") }}
      </button>
      <template v-if="payType === 'offline'">
        <div class="offline-btn">
          <div><button class="pay-btn">{{ t("adminCourse.confirmPaid") }}</button></div>
          <div>
            <button class="save-btn">{{ t("adminCourse.saveOrder") }}</button>
            <el-tooltip class="box-item" effect="dark" :content="t('adminCourse.saveOrderTip')" placement="bottom-end">
              <!-- trigger="click" -->
              <svg-icon name="exclamation" class="svg-style"></svg-icon>
            </el-tooltip>
          </div>
        </div>
      </template>
    </div>
  </el-dialog>

  <!-- 联系教师弹窗 -->
  <el-dialog v-model="showTeacherDialog" width="500px" :show-close="false" center align-center>
    <div style="background: #f5f5f5; padding: 20px; border-radius: 8px">
      <div style="font-size: 16px; margin-bottom: 16px">
        {{ t('courseDetail.consultTeacher') }}
      </div>
      <div style="display: flex; align-items: flex-start">
        <div style="
            width: 100px;
            height: 100px;
            border: 1px solid #aaa;
            border-radius: 50%;
            margin-right: 20px;
            background: #fff;
          ">
          <img style="width: 100%; height: 100%; object-fit: cover; border-radius: 50%" :src="currentTeacherInfo?.cover"
            alt="" />
        </div>
        <div>
          <div>{{ t('courseDetail.teacher') }}：{{ currentTeacherInfo?.name }}</div>
          <div>{{ t('courseDetail.phone') }}：{{ currentTeacherInfo?.contact }}</div>
        </div>
      </div>
      <div style="text-align: right; margin-top: 20px">
        <el-button type="primary" @click="showTeacherDialog = false">
          {{ t('courseDetail.close') }}
        </el-button>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
definePageMeta({
  title: "我的课程",
  en_title: "My Courses",
  zh_hk_title: "我的課程",
  ssr: true, // 必须为 true
  isTokenCheck: true,
});
import { Plus } from "@element-plus/icons-vue";
import { GetCourseListOfMy } from "~/apis/admin";
import { GetTeacherInfo } from "~/apis/web";

const { $navigate } = useNuxtApp();
const { t } = useI18n();
const classRecord = ref(false);
const dialogVisible = ref(false);
const evaluationRef = ref(null);
const coursePackageRef = ref(false);
const payType = ref("");
const payChannels = ref([""]);
const selectedPackage = ref(1);
const userStore = useStore.userStore();
const showTeacherDialog = ref(false);
const currentTeacherInfo = ref(null);

// 支付相关
const packageOptions = [
  {
    id: 1,
    key: "quarter",
    discount: "10%",
    price: 1800,
    coursePrice: 2000,
    classCount: 20,
    validityDays: 90,
  },
  {
    id: 2,
    key: "halfYear",
    discount: "20%",
    price: 4000,
    coursePrice: 5000,
    classCount: 50,
    validityDays: 180,
  },
  {
    id: 3,
    key: "year",
    discount: "30%",
    price: 5600,
    coursePrice: 8000,
    classCount: 80,
    validityDays: 180,
  },
];
const packages = computed(() =>
  packageOptions.map((pkg) => ({
    ...pkg,
    name: t(`adminCourse.package.options.${pkg.key}`),
    features: [
      t("adminCourse.package.features.classCount", {
        count: pkg.classCount,
      }),
      t("adminCourse.package.features.validityDays", {
        days: pkg.validityDays,
      }),
      t("adminCourse.package.features.discount", {
        discount: pkg.discount,
      }),
    ],
  }))
);
const payChannelOptions = [
  { value: "wechat" },
  { value: "alipay" },
  { value: "alipayhk" },
  { value: "cup" },
  { value: "visa" },
  { value: "payme" },
  { value: "transfer" },
];
const payChannelList = computed(() =>
  payChannelOptions.map((channel) => ({
    ...channel,
    label: t(`adminCourse.payChannel.${channel.value}`),
  }))
);

const activeName = ref(0);
const activeMenuList = computed(() => [
  {
    id: 0,
    text: t("adminCourse.tabStudying"),
  },
  // {
  //   id: 1,
  //   text: t("adminCourse.tabExpiring"),
  // },
  {
    id: 2,
    text: t("adminCourse.tabCompleted"),
  },
]);
const total = ref(0);
const pageNum = ref(1);
const pageSize = ref(10);
const courseList = ref([]);
const { computeCourseTypeLabel, computeScheduleTypeLabel } = useCourseLabel();

function convertRecordStatus(status) {
  switch (status) {
    case 0:
      return t("adminCourse.recordStatus.notStarted");
    case 1:
      return t("adminCourse.recordStatus.signed");
    case 2:
      return t("adminCourse.recordStatus.leaveApproved");
    case 3:
      return t("adminCourse.recordStatus.onLeave");
    case 4:
      return t("adminCourse.recordStatus.absent");
    default:
      return "";
  }
}

function convertWeek(date) {
  const week = [
    t("adminCourse.week.sun"),
    t("adminCourse.week.mon"),
    t("adminCourse.week.tue"),
    t("adminCourse.week.wed"),
    t("adminCourse.week.thu"),
    t("adminCourse.week.fri"),
    t("adminCourse.week.sat"),
  ];
  return week[new Date(date).getDay()];
}

function toggleChannel(val) {
  const idx = payChannels.value.indexOf(val);
  if (idx > -1) {
    payChannels.value.splice(idx, 1);
  } else {
    payChannels.value.push(val);
  }
}
const renewal = () => {
  coursePackageRef.value = true;
};
const handleSubmit = (params) => {
  console.log("params", params);
  dialogVisible.value = false;
  evaluationRef.value?.resetForm();
};
const handleCancelDialogVisible = () => {
  dialogVisible.value = false;
};

const handleCourseEvaluation = () => {
  dialogVisible.value = true;
};

const handleClick = (tab) => {
  activeName.value = tab;
  pageNum.value = 1;
  init();
};
const paginationChange = ({ currentPage, pageSize: size }) => {
  pageNum.value = currentPage;
  pageSize.value = size;
  init();
};

const goDetail = (params, course) => {
  $navigate(`/admin/courseSystem/${params}?courseId=${course.courseId}&studentId=${course.studentId}`);
};
const showRecord = (course) => {
  classRecord.value = {
    list: course.courseStudentClassRecordRespVOS,
    totalClassHours: course.totalClassHours,
    completedClassHours: course.completedClassHours,
  }
};

const handleShowTeacherDialog = async (course) => {
  // 获取课程的教师信息
  const teachers = course.courseTeacherConsultantRespVOS;
  if (teachers && teachers.length > 0) {
    // 获取第一个教师的详细信息
    const teacherStaffId = teachers[0].staffId;
    try {
      const res = await GetTeacherInfo({ id: teacherStaffId });
      if (res.code === 0) {
        currentTeacherInfo.value = res.data;
        showTeacherDialog.value = true;
      }
    } catch (err) {
      console.error('获取教师信息失败:', err);
    }
  }
};

const init = () => {
  let params = {
    status: activeName.value,
    pageNo: pageNum.value,
    pageSize: pageSize.value,
    sysUserId: userStore.user.id,
  };
  GetCourseListOfMy(params).then((res) => {
    console.log("GetCourseListOfMy-res", res);
    if (res.code == 0) {
      total.value = res.data.total;
      courseList.value = res.data.list;
    }
  });
};

init();
</script>

<style lang="less" scoped>
.payNow {
  width: 100%;

  .pay-btn {
    padding: 15px 63px;
    box-sizing: border-box;
    font-family: PingFang HK, PingFang HK;
    font-weight: 500;
    font-size: 16px;
    color: #fcfcfd;
    background: var(--theme-gradient-bg);
    border: none;
    cursor: pointer;
  }

  .offline-btn {
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-top: 10px;

    .save-btn {
      padding: 15px 63px;
      box-sizing: border-box;
      font-family: PingFang HK, PingFang HK;
      font-weight: 500;
      font-size: 16px;
      color: #1e2021;
      background-color: #fff;
      border: 1px solid #dcdfe6;
      cursor: pointer;
      margin-right: 10px;
    }
  }
}

.section-title-payType {
  width: 100%;

  .title {
    font-family: PingFang HK, PingFang HK;
    font-weight: 500;
    font-size: 20px;
    color: #1e2021;
    margin-bottom: 48px;
  }

  .pay-channels {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 16px;

    .custom-checkbox {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 8px 16px;
      box-sizing: border-box;
      border-radius: 6px;
      background: #fff;
      transition: border-color 0.2s;

      .icon {
        font-size: 24px;
        margin-right: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .label {
        font-family: PingFang HK, PingFang HK;
        font-weight: 600;
        font-size: 14px;
        color: #1e2021;
      }

      &.checked {
        border-color: #2b7a6b;
        background: #f0f9f4;
        // .label {
        //     color: #2b7a6b;
        // }
      }
    }
  }

  .offline-payment-details {
    margin-top: 24px;

    .upload-label {
      font-size: 14px;
      color: #656c7e;
      margin-bottom: 16px;
    }
  }
}

.coursePackages {
  .package-select-title {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 18px;
  }

  .package-cards {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;

    .package-card {
      padding: 18px 24px;
      box-sizing: border-box;
      width: 220px;
      cursor: pointer;
      background: #fff;
      transition: border-color 0.2s, box-shadow 0.2s;
      position: relative;
      border-radius: 2px 2px 2px 2px;
      border: 1px solid #000000;
      overflow: hidden;

      .selected {
        border: 1px solid #000000;
      }

      .selected-icon {
        position: absolute;
        top: 2px;
        right: 4px;
        z-index: 1;

        .svg-style {
          font-size: 15px;
          color: #ffffff;
        }
      }

      .package-header {
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .package-header-name {
          font-family: Inter, Inter;
          font-weight: 400;
          font-size: 16px;
          color: #071430;
        }

        .discount {
          flex: 1;
          position: relative;
          margin-left: 10px;

          img {
            width: 63px;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }

          .percentage {
            font-family: Inter, Inter;
            font-weight: 400;
            font-size: 16px;
            color: #ffffff;
            position: absolute;
            left: 20px;
            z-index: 1;
            top: 50%;
            transform: translateY(-50%);
          }
        }
      }

      .package-price {
        margin: 10px 0;
        font-family: Inter, Inter;
        font-weight: bold;
        font-size: 40px;
        color: #1e2021;
      }

      .package-details {
        list-style: none;
        padding: 0;
        margin: 18px 0;

        li {
          margin-bottom: 20px;
          display: flex;

          .check-icon {
            width: 20px;
            height: 20px;
            background: #e2e2e2;
            border-radius: 50%;
            text-align: center;
            margin-right: 10px;

            .svg-style {
              font-size: 10px;

              color: #2d3436;
            }
          }

          .check-icon-active {
            background: #202d48;

            .svg-style {
              color: #ffffff;
            }
          }

          .package-details-val {
            font-family: Inter, Inter;
            font-weight: 400;
            font-size: 14px;
            color: #1e2021;
          }
        }
      }

      .package-price-details {
        font-family: Inter, Inter;
        font-weight: 400;
        font-size: 12px;
        color: #656c7e;

        .price-item {
          margin-bottom: 10px;
        }

        .renewal-discount {
          color: #d03720;
          margin-left: 4px;
        }
      }
    }

    /* 为未选中的卡片添加线框三角形 */
    .package-card:not(.selected)::after {
      content: "";
      position: absolute;
      width: 56px;
      height: 56px;
      top: -28px;
      right: -28px;
      transform: rotate(45deg);
      box-shadow: 0 0 0 1px #000;
      /* 确保伪元素不会有从 .package-card.selected::after 继承的非预期样式 */
      border-style: none;
    }

    /* 选中的卡片使用实心三角形 */
    .package-card.selected::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      width: 0;
      height: 0;
      border-style: solid;
      border-width: 0 40px 40px 0;
      border-color: transparent #000000 transparent transparent;
      /* 重置从未选中状态继承的样式 */
      transform: none;
      box-shadow: none;
    }
  }
}

.page-container {
  width: 100%;

  :deep(.el-tabs__nav-wrap:after) {
    display: none;
  }

  .pagination {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 0;
  }

  .el-tab-pane-content {
    background-color: #ffffff;
    padding: 18px 14px;
    box-sizing: border-box;
    border-radius: 10px;
    margin-bottom: 10px;

    .el-tab-pane-content-left {
      width: 100%;
      display: flex;
      justify-content: flex-start;

      .el-tab-pane-content-left-img {
        width: 314px;
        height: 222px;
        margin-right: 14px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 5px;
        }
      }

      .el-tab-pane-content-left-tab {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;

        .el-tab-pane-content-left-tab-name {
          width: 100%;

          .name {
            font-family: Inter, Inter;
            font-weight: 500;
            font-size: 16px;
            color: #1f2937;
            text-align: left;
            margin-bottom: 8px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.4;
          }

          .tags {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;

            span {
              margin-right: 10px;
              margin-bottom: 10px;
              background: #eff6ff;
              border-radius: 84px 84px 84px 84px;
              padding: 4px 10px;
              box-sizing: border-box;
              font-family: Inter, Inter;
              font-weight: 500;
              font-size: 12px;
              color: #2563eb;
            }
          }
        }

        .el-tab-pane-content-left-tab-detail {
          width: 100%;

          .courser-detail {
            width: 100%;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 14px;
            color: #656c7e;
            text-align: left;
            margin-bottom: 8px;
          }
        }
      }
    }

    .el-tab-pane-content-right {
      width: 100%;
      padding-top: 10px;
      box-sizing: border-box;

      .el-tab-pane-content-right-flex {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-radius: 0px 0px 0px 0px;
        border-bottom: 1px solid #e4e4e4;
        padding: 8px 14px;
        box-sizing: border-box;
        margin-bottom: 5px;
        cursor: pointer;

        .left {
          display: flex;
          justify-content: flex-start;
          align-items: center;

          .svg-style {
            font-size: 24px;
            margin-right: 12px;
          }

          span {
            font-family: PingFang HK, PingFang HK;
            font-weight: 500;
            font-size: 16px;
            color: #1e2021;
            line-height: 24px;
            text-align: left;
          }

          .description {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 12px;
            color: #656c7e;
            text-align: left;
            margin-left: 14px;
          }
        }

        .right {
          display: flex;
          justify-content: flex-end;
          align-items: center;

          span {
            font-family: PingFang HK, PingFang HK;
            font-weight: 400;
            font-size: 14px;
            color: #656c7e;
            text-align: right;
          }

          .arrow-right {
            margin-left: 6px;
          }

          img {
            width: 16px;
            height: 16px;
            border-radius: 50%;
            margin-right: 6px;
          }
        }
      }
    }
  }
}

.classRecord {
  width: 100%;
  padding: 18px 0px;
  box-sizing: border-box;

  .classRecord-header {
    font-family: PingFang HK, PingFang HK;
    font-weight: 500;
    font-size: 16px;
    color: #1e2021;
    text-align: left;
  }

  .classRecord-content {
    margin-top: 25px;

    .classRecord-content-list {
      width: 100%;
      height: 60px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background-color: #f0f0f0;
      margin-bottom: 10px;

      .left {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: 100%;

        .title {
          width: 54px;
          height: 100%;
          background: var(--theme-gradient-bg);
          line-height: 54px;
          text-align: center;
          font-family: Poppins, Poppins;
          font-weight: 400;
          font-size: 22px;
          color: #ffffff;
          border-radius: 5px;
          margin-right: 15px;
        }

        .calendar {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 16px;
          color: #656c7e;
          text-align: left;
          margin-right: 15px;
        }

        .week {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 16px;
          color: #656c7e;
          text-align: left;
          margin-right: 15px;
        }

        .date {
          font-family: PingFang HK, PingFang HK;
          font-weight: 400;
          font-size: 16px;
          color: #656c7e;
          text-align: left;
        }
      }

      .right {
        font-family: PingFang HK, PingFang HK;
        font-weight: 500;
        font-size: 16px;
        color: #252641;
        text-align: left;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }
}

.el-tooltip {
  inset: 20px 30px auto auto !important;
}
</style>

<style lang="less">
/* 放大选中圆圈和对勾 */
.section .el-radio__inner {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50%;
  border-width: 2px;
}

/* 选中时绿色背景 */
.section .el-radio.is-checked .el-radio__inner {
  background: #2b7a6b;
  border-color: #2b7a6b;
  position: relative;
}

/* 选中时显示大号对勾 */
.section .el-radio.is-checked .el-radio__inner::after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: url('data:image/svg+xml;utf8,<svg fill="white" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.173 13.727a.75.75 0 0 1-1.06 0l-3.84-3.84a.75.75 0 1 1 1.06-1.06l3.31 3.31 7.07-7.07a.75.75 0 0 1 1.06 1.06l-7.6 7.6z"/></svg>');
  background-size: 16px 16px;
  background-repeat: no-repeat;
  background-position: center;
}

/* 未选中时不显示对勾 */
.section .el-radio__inner::after {
  content: none;
}

.section-type-text .el-radio__label {
  font-family: PingFang HK, PingFang HK;
  font-weight: 600;
  font-size: 18px;
  color: #1e2021 !important;
  line-height: 24px;
  text-align: left;
  font-style: normal;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
}
</style>
